{% extends "ik/base.html" %}

{% block head_interior %}
	<script language="javascript" src="http://o.aolcdn.com/dojo/0.4.3/dojo.js"></script>

	<script language="javascript" src="/static/ik/info/charting_utils.js"></script>

	<link rel="stylesheet" type="text/css" href="/static/ik/info/island.css" />
{% endblock %}

{% block title %}Island Info - {{ island.name }}{% endblock %}

{% block main_content %}
<h1>Island Info</h1>
<table>
	<tr>
		<th>Island:</th>
		<td>{{island.name}}</td>
	</tr>
	<tr>
			<th>Position:</th>
			<td> {{ island.position }} </td>
	</tr>
	<tr>
			<th>Ruler:</th>
			<td>
				{% if island.player %}
					<a href={{island.player.get_absolute_url}}>{{island.player.name}}</a>
				{% endif %}
			</td>
	</tr>
	<tr>
			<th>Alliance:</th>
			<td>
				<a href={{island.player.alliance.get_absolute_url}}> {{island.player.alliance.tag}} </a>
			</td>
	</tr>
	<tr>
			<th>Score:</th>
			<td>{{island.score}}</td>
	</tr>
</table>

<div id="ScoreChart">Loading Data...</div>

<script type="text/javascript"><!--
google_ad_client = "pub-7423629205927780";
google_ad_width = 300;
google_ad_height = 250;
google_ad_format = "300x250_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "0616F3";
google_color_text = "000000";
google_color_url = "6BB6E1";
//-->
</script>
<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>

<h2>History</h2>
<table>
	<thead>
		<th class="date">Date</th>
		<th class="name">Name</th>
		<th class="ruler">Ruler</th>
		<th class="alliance">Alliance</th>
		<th class="score">Score</th>
	</thead>

	<tbody>
	{% for sample in history %}
		<tr>
			<td> {{sample.map_scan.end_time|date:"j M"}}</td>
			<td> {{sample.name }} 		</td>
			<td> {{sample.ruler}} 		</td>
			<td> {{sample.alliance_tag}}</td>
			<td> {{sample.score}} 		</td>
		</tr>
	{% endfor %}
	</tbody>
</table>

<script>
dojo.require("dojo.collections.Store");
dojo.require("dojo.charting.Chart");
dojo.require('dojo.json');

function addScores(data)
	{
		var plotArea = new dojo.charting.PlotArea();
		plotArea.size={width:680, height:200};
		plotArea.padding={top:20, right:20, bottom:30, left:50 };


		var chart = new dojo.charting.Chart(null, "Island Score History", "The island's score since first seen.");
		//The x and y values are required, or the area wont show in IE.
		chart.addPlotArea({x:0, y:0, plotArea:plotArea });

		chart.node = dojo.byId("ScoreChart");
		chart.render();

		var store = new dojo.collections.Store();
		store.setData(data);

		var score_series = new dojo.charting.Series({
			dataSource : store,
			bindings : { x:"time", y:"score" },
			label : "Score"
			});

		var xA = buildAxisX(data);
		var yA = buildAxisY(data, 'score');
		yA.label = "Score";

		var p = new dojo.charting.Plot(xA, yA);
		p.addSeries({ data:score_series, plotter: dojo.charting.Plotters.Line });

		plotArea.plots.push(p);
		score_series.color = "#0616f3";

		chart.render();

	}

function onLoad()
{
	var bindArgs = {
						url: "{{island.get_absolute_url }}island_scores/",
						error: function(type, error, evt){ },
						load: function(type, data, evt) {addScores(data); },
						mimetype: "text/json"
					};

	dojo.io.bind(bindArgs);

}

dojo.addOnLoad(onLoad)
</script>
{% endblock %}